建立子元素

React.createElement("標籤名稱",｛屬性object}, "子標籤")

createElement的第三個參數是用來傳入子元素，這裡要放的就是子標籤。

• 若我們要用React元素，呈現以下html標籤的樣子:

<div>
  <h2>My to do list</h2>
  <ul>
    <li><p><span>第一點</span></p></li>
    <li>第二點</li>
  </ul>
</div>

• 使用React建立元素:

import React from "react";
import ReactDOM from "react-dom";

const h2 = React.createElement('h2', {}, 'My to do list');

const li_1 = React.createElement('li',{}, React.createElement(
  'p', {}, React.createElement(
    'span', {}, '第一點')));
    
const li_2 = React.createElement('li', {}, '第二點');

const e = React.createElement('div', {}, [h2, React.createElement('ul',{}, [
  li_1,
  li_2
])]);
  

const myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

呈現畫面>>>

可從上方的程式結構看出，這樣透過createElement一層一層建立元素的方式不是很直觀，可讀性很低。
如果我們用JSX語法，會變什麼樣子呢?

使用JSX 建立子元素

import React from "react";
import ReactDOM from "react-dom";

const e = <div>
<h2>My to do list</h2>
<ul>
  <li><p><span>第一點</span></p></li>
  <li>第二點</li>
</ul>
</div>


const myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

呈現畫面>>>

從上面JSX語法可以發現，只要把原本的html架構貼過來存到變數裡，最後再render到DOM內，就會是我們要的結果了。相較於原本的方式，整個架構是不是更簡潔、更好理解了呢?

總結
所以在實務上，基本上是不會再用createElement的方式，而是用更簡潔的JSX語法去建立React元素了。( 但是為了有更扎實的基礎，還是要理解一下底層的架構比較好。)